<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	
	<canvas id="canvas" width="250" height="250"></canvas>
	
	<canvas id="canvas1" width="250" height="250"></canvas>
	
	<script>
		class circleProgress{
			constructor(id){
				this.canvas = document.getElementById(id);
				this.context = this.canvas.getContext('2d');
				this.centerX = this.canvas.width/2,
				this.centerY = this.canvas.height/2,
				this.rad = (Math.PI*1.5)/100;
			}
			init(percent){
				console.log()
				this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
				this.font(percent, this.context, this.centerX, this.centerY);
				this.bgCircle(this.context, this.centerX, this.centerY);
				this.runCircle(percent, this.context, this.centerX, this.centerY, this.rad);
			}
			bgCircle(ctx, cterX, cterY){
				ctx.save();
				ctx.beginPath();
				ctx.lineCap="round";
				ctx.lineWidth = 10; //设置线宽
				ctx.strokeStyle = "#FF5722";
				ctx.arc(cterX, cterY, 100 , Math.PI*0.25, Math.PI*0.75, true);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
			}
			runCircle(per, ctx, cterX, cterY, r){
				ctx.save();
				ctx.beginPath();
				ctx.lineCap="round";
				ctx.lineWidth = 10; //设置线宽
				ctx.strokeStyle = "#fff";
				ctx.arc(cterX, cterY, 100 , Math.PI*0.75, Math.PI*0.75 + r*per, false);
				ctx.stroke();
				ctx.closePath();
				ctx.restore();
			}
			font(per, ctx, cterX, cterY){
				ctx.save();
				ctx.fillStyle = "#009688";
				ctx.font = "30px Arial";  //设置字体大小和字体
				ctx.fillText(per.toFixed(0)+"%", cterX-25, cterY+10);
				ctx.textAlign="center";
				ctx.textBaseline="middle";
				ctx.restore();
			}
		}
		
		var exaOne = new circleProgress('canvas');
		var exaTwo = new circleProgress('canvas1');
		
		var score = 0,score1 = 0;
		let anim = setInterval(function(){
			exaOne.init(score);
			score+=1;
			if(score > 100){
				clearInterval(anim);
			}
		}, 100);
		
		let anim1 = setInterval(function(){
			exaTwo.init(score1);
			score1+=1;
			if(score1 > 100){
				clearInterval(anim1);
			}
		}, 200);
		
		
	</script>
</body>
</html>